<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>门票详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" href="../css/common.css" />
	<style>
		body,.mui-content {
			background: #fff;
		}
		.mui-bar .mui-icon {
			color: #666666;
		}
		.mui-title {
			color: #666666;
		}
		.info-img {
			position: relative;
		}
		.info-img img {
			width: 100%;
			height: 240px;
		}
		.admission-info-back {
			position: relative;
			margin-top: -50px;
			padding: 20px 20px 0 16px;
			width: 100%;
			height: 143px;
			background: url(../img/admission/info-back.png) no-repeat;
			background-size: 100% 100%;
		}
		.info-price {
			font-size: 15px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #FE8900;
		}
		.info-title {
			margin-top: 12px;
			font-size: 15px;
			font-family:PingFang SC;
			font-weight: bold;
		}
		.info-score {
			display: flex;
			justify-content: space-between;
			align-content: center;
			margin-top: 12px;
			font-size: 13px;
			font-family:PingFang SC;
			font-weight: bold;
			color: #999999;
		}
		.info-score span:nth-child(2) {
			margin-left: 60px;
		}
		.collection-icon img {
			width: 25px;
			height: 23px;
		}
		.admission-title {
			margin-left: 15px;
			font-size: 15px;
			font-family:PingFang SC;
			font-weight: bold;
		}
		.ticket-type {
			margin-top: 16px;
			padding: 0 10px;
		}
		.ticket-ul {
			display: flex;
			flex-direction: column;
		}
		.ticket-li {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 10px;
			border-top: 1px solid #EEEEEE;
			border-left: 1px solid #EEEEEE;
			border-right: 1px solid #EEEEEE;
		}
		.ticket-li:last-child {
			border-bottom: 1px solid #EEEEEE;
		}
		.type-name {
			font-size: 14px;
			font-family:PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 54px;
		}
		.type-price {
			font-size: 14px;
			font-family:PingFang SC;
			font-weight: bold;
			color: #FE5005;
			text-align: center;
		}
		.type-btn {
			margin-top: 8px;
		}
		.type-btn button {
			background: linear-gradient(90deg,rgba(254,200,4,1) 0%,rgba(254,80,5,1) 100%);
			border-radius: 18px;
			padding: 2px 10px;
			color: #fff;
		}
		.dividing-line {
			margin-top: 15px;
			width: 100%;
			height: 12px;
			background: #efeff4;
		}
		.evaluate-btn {
			margin-top: 15px;
			margin-left: 15px;
		}
		.evaluate-btn button {
			margin-right: 20px;
			padding: 2px 10px;
			background:rgba(254,200,4,0.2);
			border:1px solid rgba(254,200,4,1);
			border-radius:18px;
			color: #FEC804;
		}
		.evaluate-ul {
			margin-top: 20px;
		}
		.evaluate-li {
			padding: 10px;
			border-bottom: 1px solid #D2D2D2;
		}
		.evaluate-user {
			display: flex;
			justify-content: space-between;
		}
		.user-score {
			display: flex;
			align-items: flex-start;
		}
		.user-head {
			width: 34px;
			height: 34px;
			border-radius: 50%;
		}
		.name-score {
			margin-left: 6px;
		}
		.name-score .name {
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #666;
		}
		.name-score .score {
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #E6B406;
		}
		.evaluate-time {
			font-size: 12px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #999;
		}
		.evaluate-content {
			margin-top: 5px;
			margin-left: 40px;
			font-size: 12px;
			font-family:PingFang SC;
			font-weight:500;
			color: #666;
		}
		.details-info {
			margin-bottom: 20px;
			width: 100%;
			margin-top: 20px;
			padding: 0 10px;
		}
		.details-info img {
			font-size: 0;
			max-width: 100%;
			height: auto;
			vertical-align: top;
		}
	</style>
</head>
<body>
	<header id="header" class="mui-bar mui-bar-transparent">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">门票详情</h1>
	</header>
	<div class="mui-content">
		<div class="info-img">
			<img id="imgUrl" src="../img/rentCar/rent-car-back.jpg" />
		</div>
		<div class="admission-info-back">
			<div id="showPirce" class="info-price">¥ 0</div>
			<div id="ticketsName" class="info-title mui-ellipsis-2"></div>
			<div class="info-score">
				<div>
					<span id="avgStars">暂无评分</span>
					<span id="evaluationCount">暂无评论</span>
				</div>
				<div id="addCollection" class="collection-icon">
					<img src="../img/admission/collection.png" />
				</div>
			</div>
		</div>
		<div style="margin-top: 20px;" class="admission-title">选择票种</div>
		<div class="ticket-type">
			<div class="ticket-ul">
				<div class="ticket-li">
					<div class="type-name">成人票</div>
					<div class="type-price-btn">
						<div id="adultPrice" class="type-price">¥</div>
						<div class="type-btn">
							<button type="button" data-ticketType="1" data-price="" class="mui-btn">预定</button>
						</div>
					</div>
				</div>
				<div class="ticket-li">
					<div class="type-name">学生票</div>
					<div class="type-price-btn">
						<div id="studentPrice" class="type-price">¥</div>
						<div class="type-btn">
							<button type="button" data-ticketType="2" data-price="" class="mui-btn">预定</button>
						</div>
					</div>
				</div>
				<div class="ticket-li">
					<div class="type-name">儿童票</div>
					<div class="type-price-btn">
						<div id="childrenPrice" class="type-price">¥</div>
						<div class="type-btn">
							<button type="button" data-ticketType="3" data-price="" class="mui-btn">预定</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="dividing-line"></div>
		<div style="margin-top: 15px;" class="admission-title">点评（<span id="evaluateNum">0</span>）</div>
		<div class="evaluate-btn">
			<button type="button" data-option="0" class="mui-btn">全部</button>
			<button type="button" data-option="1" class="mui-btn">好评</button>
			<button type="button" data-option="2" class="mui-btn">中评</button>
			<button type="button" data-option="3" class="mui-btn">差评</button>
		</div>
		<div class="evaluate-ul">
			<!--<div class="evaluate-li">
				<div class="evaluate-user">
					<div class="user-score">
						<img class="user-head" src="../img/homePage/home-beijing.png" />
						<div class="name-score">
							<div class="name">一只小冯啊</div>
							<div class="score">5分</div>
						</div>
					</div>
					<div class="evaluate-time">2020-01-02</div>
				</div>
				<div class="evaluate-content">入园很顺利，不需要打印出来，直接打开邮件扫码就可以了，迪士尼海洋八点的梦幻秀也太棒了!很完美的体验。</div>
			</div>-->
		</div>
		<div class="dividing-line"></div>
		<div style="margin-top: 20px;" class="admission-title">详情信息</div>
		<div class="details-info">
			
		</div>
	</div>	
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script>
		var customerId = base.getParameter("customerId");
		var ticketsId = base.getParameter("ticketsId");
		$(function() {
			getTicketsInfo();
		});
		function getTicketsInfo() {
			var data = {
				customerId: customerId,
				ticketsId: ticketsId,
			}
			base.postData(base.url.getTicketsInfo, data, function(data) {
				if (data.success) {
					$("#showPirce").html("¥ "+data.extendData.childrenPrice+"-"+data.extendData.adultPrice);
					$("#ticketsName").html(data.extendData.ticketsName);
					$("#avgStars").html(data.extendData.avgStars==0?"暂无评分":data.extendData.avgStars+"分");
					$("#evaluationCount").html(data.extendData.evaluationCount==0?"暂无评论":"评论"+data.extendData.evaluationCount+"条");
					$("#evaluateNum").text(data.extendData.evaluationCount);
					$("#adultPrice").html("¥"+data.extendData.adultPrice);
					$("#adultPrice").closest(".type-price-btn").find("button").attr("data-price", data.extendData.adultPrice);
					$("#studentPrice").html("¥"+data.extendData.studentPrice);
					$("#studentPrice").closest(".type-price-btn").find("button").attr("data-price", data.extendData.studentPrice);
					$("#childrenPrice").html("¥"+data.extendData.childrenPrice);
					$("#childrenPrice").closest(".type-price-btn").find("button").attr("data-price", data.extendData.childrenPrice);
					$("#imgUrl").attr("src", data.extendData.imgUrl);
					$(".details-info").html(data.extendData.details);
					if (data.extendData.isCollection == 1) {
						$("#addCollection").find("img").attr("src", "../img/admission/collection_active.png")
					}
					pingEvaluationList(data.extendData.evaluationList);
				} else {
					mui.toast(data.message);
				}
			});	
		}
		function pingEvaluationList(list){
			if (list.length == 0) {
				$(".evaluate-btn").hide();
			}
			var html = "";
			for(var i=0; i<list.length; i++) {
				html += '<div class="evaluate-li">'+
						'	<div class="evaluate-user">'+
						'		<div class="user-score">'+
						'			<img class="user-head" src="'+list[i].headImg+'" />'+
						'			<div class="name-score">'+
						'				<div class="name">'+list[i].userName+'</div>'+
						'				<div class="score">'+list[i].stars+'分</div>'+
						'			</div>'+
						'		</div>'+
						'		<div class="evaluate-time">'+list[i].createTime+'</div>'+
						'	</div>'+
						'	<div class="evaluate-content">'+list[i].msg+'</div>'+
						'</div>';
			}
			$(".evaluate-ul").html(html);
		}
		//添加收藏
		$("#addCollection").on('tap', function() {
			var that = this;
			var data = {
				customerId: customerId,
				type: 1,//1:门票；2：周游券；3：租车
				objId: ticketsId
			}
			base.postData(base.url.addCollection, data, function(data) {
				mui.toast(data.message);
				if (data.success) {
					if ($(that).find("img").attr("src").indexOf("collection.png") == -1 ) {
						$(that).find("img").attr("src", "../img/admission/collection.png")
					}else {
						$(that).find("img").attr("src", "../img/admission/collection_active.png")
					}
				}
			});		
		});
		//跳转评价列表
		$(".evaluate-btn").on('tap', '.mui-btn', function() {
			var evaluationType = $(this).attr("data-option");
			window.location.href = "admissionEvaluation.html?objId="+ticketsId+"&evaluationType="+evaluationType+"&ticketType=1"
		});
		//跳转下单
		$(".ticket-ul").on('tap', '.ticket-li button', function() {
			var ticketType = $(this).attr("data-ticketType");
			var price = $(this).attr("data-price");
			window.location.href = "admissionOrder.html?customerId="+customerId+"&objId="+ticketsId+"&price="+price+"&payType=1&ticketType="+ticketType;
		});
	</script>
</body>
</html>
